<template>
  <div>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        />
        <el-table-column
          prop="locomotiveName"
          label="轨道车"
          align="center"
        />
        <el-table-column
          label="前方视频"
          align="center"
        >
          <template slot-scope="scope">
            <span
              >{{ scope.row.frontIp === null ? '--' : scope.row.frontIp }}:{{
                scope.row.frontSerial === null ? '--' : scope.row.frontSerial
              }}:{{
                scope.row.frontPassword === null
                  ? '--'
                  : scope.row.frontPassword
              }}:{{
                scope.row.frontChannel === null ? '--' : scope.row.frontChannel
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="后方视频"
          align="center"
        >
          <template slot-scope="scope">
            <span
              >{{
                scope.row.behindCameraIp === null
                  ? '--'
                  : scope.row.behindCameraIp
              }}
              :{{
                scope.row.behindSerial === null ? '--' : scope.row.behindSerial
              }}:
              {{
                scope.row.behindPassword === null
                  ? '--'
                  : scope.row.behindPassword
              }}:{{
                scope.row.behindChannel === null
                  ? '--'
                  : scope.row.behindChannel
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="平板车/移动领航"
          align="center"
        >
          <template slot-scope="scope">
            <span
              >{{ scope.row.mobileIp === null ? '--' : scope.row.mobileIp }}:
              {{
                scope.row.mobileSerial === null ? '--' : scope.row.mobileSerial
              }}:
              {{
                scope.row.mobilePassword === null
                  ? '--'
                  : scope.row.mobilePassword
              }}:{{
                scope.row.mobileChannel === null
                  ? '--'
                  : scope.row.mobileChannel
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="editHandler(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="position: absolute; right: 50px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
    <el-dialog
      title="编辑"
      :visible.sync="editDialogStatus"
      width="40%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-row
        type="flex"
        justify="start"
        class="mgb-10"
      >
        <el-col :span="5">
          <div
            class="pDiv"
            style="padding: 0"
          >
            前方摄像头
          </div>
        </el-col>
        <el-col :span="5">
          <el-input
            placeholder="摄像头ip"
            v-model.number="editFrom.frontIp"
            style="display: inline-block"
          >
          </el-input
        ></el-col>
        <el-col :span="1"
          ><div
            class="pDiv"
            style="padding: 0"
          >
            +
          </div></el-col
        >
        <el-col :span="5">
          <el-input
            placeholder="摄像头序列号"
            v-model.number="editFrom.frontSerial"
            style="display: inline-block"
          >
          </el-input>
        </el-col>
        <el-col :span="1"
          ><div
            class="pDiv"
            style="padding: 0"
          >
            +
          </div></el-col
        >
        <el-col :span="5">
          <el-input
            placeholder="摄像头密码"
            v-model.number="editFrom.frontPassword"
            style="display: inline-block"
          >
          </el-input>
        </el-col>
        <el-col :span="1"
          ><div
            class="pDiv"
            style="padding: 0"
          >
            +
          </div></el-col
        >
        <el-col :span="5">
          <el-input
            placeholder="通道号"
            v-model.number="editFrom.frontChannel"
            style="display: inline-block"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row
        type="flex"
        justify="start"
        class="mgb-10"
      >
        <el-col :span="5">
          <div
            class="pDiv"
            style="padding: 0"
          >
            后方摄像头
          </div>
        </el-col>
        <el-col :span="5">
          <el-input
            placeholder="摄像头ip"
            v-model.number="editFrom.behindCameraIp"
            style="display: inline-block"
          >
          </el-input
        ></el-col>
        <el-col :span="1"
          ><div
            class="pDiv"
            style="padding: 0"
          >
            +
          </div></el-col
        >
        <el-col :span="5">
          <el-input
            placeholder="摄像头序列号"
            v-model.number="editFrom.behindSerial"
            style="display: inline-block"
          >
          </el-input>
        </el-col>
        <el-col :span="1"
          ><div
            class="pDiv"
            style="padding: 0"
          >
            +
          </div></el-col
        >
        <el-col :span="5">
          <el-input
            placeholder="摄像头密码"
            v-model.number="editFrom.behindPassword"
            style="display: inline-block"
          >
          </el-input>
        </el-col>
        <el-col :span="1"
          ><div
            class="pDiv"
            style="padding: 0"
          >
            +
          </div></el-col
        >
        <el-col :span="5">
          <el-input
            placeholder="通道号"
            v-model.number="editFrom.behindChannel"
            style="display: inline-block"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row
        type="flex"
        justify="start"
        class="mgb-10"
      >
        <el-col :span="5">
          <div
            class="pDiv"
            style="padding: 0"
          >
            平板车/移动领航
          </div>
        </el-col>
        <el-col :span="5">
          <el-input
            placeholder="摄像头ip"
            v-model.number="editFrom.mobileIp"
            style="display: inline-block"
          >
          </el-input
        ></el-col>
        <el-col :span="1"
          ><div
            class="pDiv"
            style="padding: 0"
          >
            +
          </div></el-col
        >
        <el-col :span="5">
          <el-input
            placeholder="摄像头序列号"
            v-model.number="editFrom.mobileSerial"
            style="display: inline-block"
          >
          </el-input>
        </el-col>
        <el-col :span="1"
          ><div
            class="pDiv"
            style="padding: 0"
          >
            +
          </div></el-col
        >
        <el-col :span="5">
          <el-input
            placeholder="摄像头密码"
            v-model.number="editFrom.mobilePassword"
            style="display: inline-block"
          >
          </el-input>
        </el-col>
        <el-col :span="1"
          ><div
            class="pDiv"
            style="padding: 0"
          >
            +
          </div></el-col
        >
        <el-col :span="5">
          <el-input
            placeholder="通道号"
            v-model.number="editFrom.mobileChannel"
            style="display: inline-block"
          >
          </el-input>
        </el-col>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editDialogStatus = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editSaveHandler()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getLocomotiveVideo,
  updateLocomotiveVideo,
} from '/src/http/productSchedule/locomotiveVideoMg.js'

export default {
  data() {
    return {
      tableData: [],
      total: 0,
      pagesiz: 10,
      currentPage: 1,
      renderData: [],
      player: null,
      editDialogStatus: false,
      editFrom: {
        frontIp: '',
        frontSerial: '',
        frontPassword: '',
        frontChannel: '',
        behindCameraIp: '',
        behindSerial: '',
        behindPassword: '',
        behindChannel: '',
        mobileIp: '',
        mobileSerial: '',
        mobilePassword: '',
        mobileChannel: '',
      },
    }
  },

  mounted() {
    this.getLocomotiveVideoApi()
  },

  methods: {
    handleSizeChange(v) {
      this.currentPage = 1
      this.pageSize = v
      this.getLocomotiveVideoApi(1, v)
    },

    handleCurrentChange(v) {
      this.currentPage = v
      this.getLocomotiveVideoApi(v, this.pageSize)
    },
    editHandler(v) {
      this.editDialogStatus = true
      this.editFrom = JSON.parse(JSON.stringify(v))
    },

    async getLocomotiveVideoApi(pageNum = 1, pageSize = 10) {
      let params = {
        pageNum,
        pageSize,
      }
      await getLocomotiveVideo(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records
          this.total = res.data.total
        }
      })
    },

    editSaveHandler() {
      this.$confirm('确认编辑此条信息?', '提示', {
        confirmButtonText: '确定编辑',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          let params = this.editFrom
          updateLocomotiveVideo(params).then((res) => {
            if (res.code == 200) {
              this.$message.success('编辑成功')
              this.editDialogStatus = false
              this.getLocomotiveVideoApi(this.currentPage, this.pageSize)
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消编辑',
          })
        })
    },
  },
}
</script>

<style lang="less" scoped>
.el-date-editor {
  margin: 0 10px;
}
.imgBox {
  position: relative;
  top: 0;
  left: 0;
  .uploadImg {
    position: absolute;
    top: 30%;
    left: 30%;
    visibility: hidden;
  }
}
.imgBox:hover .uploadImg {
  visibility: visible;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.pDiv {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-right: 0px;
  border-radius: 4px 0 0 4px;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
:deep(.pSelect) {
  .el-input__inner {
    border-radius: 0 4px 4px 0;
    width: 107.5%;
  }
  .el-input__suffix {
    right: -5%;
  }
}
.mgb-10 {
  margin-bottom: 10px;
}
</style>
